<template>
  <div class="search-page">
        <!-- 搜索栏 -->
        <div class="search-bar">
            <div class="input-box">
                <input type="text" class="input" placeholder="请输入单位名称" v-model="keyWords">
                <img src="/static/images/icon_search_btn.png" class="search-btn" @click="onClickSeach" />
            </div>
        </div>
        <div class="history">
            <div class="history-title">历史查找</div>
            <div class="history-list" v-for="(item,index) in historyList" :key="index" @click="onClickSeach('selcet',item)">{{item}}</div>
        </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            keyWords:'',
            historyList:[]
        }
    },
    onLoad(data){
        
    },
    onShow(){
        this.getHistory();
    },
    methods:{
        onClickSeach(type,str){
            if(type == 'selcet'){
                uni.navigateTo(
                    {
                        url:`/pages/personnel/index?keyword=${str}`
                    }
                )
                this.setHistory(str)
            }else{
                if(this.keyWords.length == 0){
                    uni.showToast({
                        title: '请输入公司名称',
                        icon: 'none',
                        duration: 2000
                    })
                    return
                }
                uni.navigateTo(
                    {
                        url:`/pages/personnel/index?keyword=${this.keyWords}`
                    }
                )
                this.setHistory(this.keyWords)
            }
        },
        // 设置缓存
        setHistory(keyWord){
            if(keyWord){
                let arr = this.historyList

                //查找是否有重复项
                let index = arr.findIndex(item=>{
                    return item == keyWord
                })
                //如果有重复则先删除旧数据
                if(index !== -1){
                    arr.splice(index,1)
                }

                if(arr.length > 10){
                    arr.unshift(keyWord)
                    arr.pop()
                }else{
                    arr.unshift(keyWord)
                }
                let strArr = JSON.stringify(arr)
                wx.setStorageSync('history', strArr)
                this.keyWords = ''
            }
        },
        //读取缓存
        getHistory(){
            let This = this;
            let value = wx.getStorageSync('history') || "[]";//容错
            this.historyList = JSON.parse(value);
        }
    }
}
</script>

<style lang="scss" scoped>
    .search-page{
        width: 100%;
        min-height: 100vh;
        padding: 0 25rpx;
        .search-bar{
		    width: 100%;
		    height: 128rpx;
		    background-color: #fff;
		    display: flex;
		    justify-content: flex-start;
		    align-items: center;
			border-bottom: 1rpx solid #F0F0F0;
		    .input-box{
		        display: flex;
		        justify-content: flex-start;
		        align-items: center;
		        .input{
                    width: 618rpx;
		            height:77rpx;
		            background:rgba(238,238,238,1);
		            font-size: 28rpx;
		            padding-left: 15rpx;
		        }
		        .search-btn{
		            width:84rpx;
		            height:77rpx;
		            background-size: 100% 100%;
		            background-repeat: no-repeat;
		            position: relative;
		            left: -1rpx;
		        }
		    }
		}
        .history{
            margin-top: 15rpx;
            .history-title{
                font-size:30rpx;
                margin-top: 20rpx;
                font-weight:bold;
                color:rgba(75,75,75,1);
            }
            .history-list{
                font-size:28rpx;
                font-weight:500;
                color:rgba(152,152,152,1);
                margin-top: 27rpx;
                line-height: 60rpx;
            }
        }
    }
</style>